<template>
  <el-dialog title="全景" :visible.sync="dialogVisible" width="30%">
    <div id="viewer"></div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
  <!-- <div id="viewer"></div> -->
</template>

<script>
import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

export default {
  data () {
    return {
      dialogVisible: false,
      PSV: null,
      imgUrl: require('../assets/image/panorama/sphere.jpg')
    }
  },
  methods: {
    initPhotoSphere () {
      this.$nextTick(() => {
        this.PSV = new Viewer({
          container: document.querySelector('#viewer'),
          panorama: this.imgUrl,
          size: {
            width: '100%',
            height: '30vh'
          }
        })
      })
    },
    propShow () {
      this.dialogVisible = true
      this.initPhotoSphere()
    }
  },
  mounted () {
    // this.initPhotoSphere()
  }
}
</script>

<style>
#viewer {
  width: 100vw;
  height: 50vh;
}
</style>
